﻿<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link th:href="@{/front-resource/css/style.css}" type="text/css" rel="stylesheet" />
<link th:href="@{/front-resource/css/app.css}" type="text/css" rel="stylesheet" />
<!-- Favicon -->
<!-- Favicon and Touch Icons -->
<link th:href="@{/front-resource/images/favicon.png}" rel="shortcut icon" type="image/png">
<link th:href="@{/front-resource/images/apple-touch-icon.png}" rel="apple-touch-icon">
<link th:href="@{/front-resource/images/apple-touch-icon-72x72.png}" rel="apple-touch-icon" sizes="72x72">
<link th:href="@{/front-resource/images/apple-touch-icon-114x114.png}" rel="apple-touch-icon" sizes="114x114">
<link th:href="@{/front-resource/images/apple-touch-icon-144x144.png}" rel="apple-touch-icon" sizes="144x144">
<title>酒店订单</title>
</head>
<body>
<!-- Start Main Menu Area -->
<div th:replace="/common/frontCommon::header"></div>
<!-- End Main Menu Area -->

<section class="breadcromb-top section_100">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <ol class="text-white justify-content-center no-border mb-0">
          <li class="breadcrumb-item"><a href="index.html"></a></li>
          <li class="breadcrumb-item active">订单</li>
        </ol>
        <div class="breadcromb-box">
          <h3>订单详情</h3>
        </div>
      </div>
    </div>
  </div>
</section>
<section class="clearfix bg-dark dashboardOrders pt80 pb80 admin-page">
	<div class="container">
		<div class="row">
			<div class="col-md-12 col-xs-12">
					<div class="dashboardBoxBg mb30">
						<div class="profileIntro">
							<div class="row">
								<div class="form-group col-md-4 col-sm-6 col-xs-12">
									<label for="orderId">订单ID</label>
									<input type="text" class="form-control" id="orderId" th:value="${order.orderId}" readonly>
								</div>
								<div class="form-group col-md-4 col-sm-6 col-xs-12">
								   <label for="customer">入住人姓名</label>
								   <input type="text" class="form-control" id="customer"  th:value="${order.customerName}" readonly>
							    </div>
                                <div class="form-group col-md-4 col-sm-6 col-xs-12">
                                    <label for="customerTel">预留电话</label>
                                    <input type="text" class="form-control" id="customerTel"  th:value="${order.customerTel}"readonly>
                                </div>
								<div class="form-group col-md-4 col-sm-6 col-xs-12">
								   <label for="hotelName">酒店名称</label>
								   <input type="text" class="form-control" id="hotelName"  th:value="${order.orderHotel}"readonly>
							    </div>
								<div class="form-group col-md-4 col-sm-6 col-xs-12">
									<label for="orderStatus"  th:switch="${order.orderStatus}">订单状态</label>
                                    <input type="text" class="form-control" id="orderStatus" th:value="${order.orderStatus==0?'订单完成':'预订成功'}" readonly>
								</div>
								<div class="form-group col-md-4 col-sm-6 col-xs-12" >
									<label for="roomType">预订房间类型</label>
									<input type="text" class="form-control" id="roomType"  th:value="${order.orderRoom}"readonly>
								</div>
								<div class="form-group col-md-4 col-sm-6 col-xs-12">
									<label for="roomPrize">支付金额</label>
									<input type="text" class="form-control" id="roomPrize"  th:value="${order.orderPrize}+'元'" readonly>
								</div>

								<div class="form-group col-md-4 col-sm-6 col-xs-12">
									<label for="orderTime">预定时间</label>
									<input type="text" class="form-control" id="orderTime"  th:value="${#dates.format(order.orderTime,'yyyy-MM-dd HH:mm:ss')}"readonly>
								</div>
                                <div class="form-group col-md-4 col-sm-6 col-xs-12">
                                    <label for="inTime">入住时间</label>
                                    <input type="text" class="form-control" id="inTime"  th:value="${#dates.format(order.inTime,'yyyy-MM-dd')}" readonly>
                                </div>
							</div>
							<div align="right" style="position: relative;top: 10px" th:switch="${order.orderStatus}">
								<span style="background: #2196f3;color: #ffffff;padding: 4px;border-radius: 10px;" th:if="${order.orderStatus}==1" class="primaryColor">已支付</span>
								<span style="background: gray;color: #ffffff;padding: 4px;border-radius: 10px;" th:if="${order.orderStatus}==2">订单已取消</span>
								<span style="background: gray;color: #ffffff;padding: 4px;border-radius: 10px;" th:if="${order.orderStatus}==99">订单已退款</span>
								<button th:value="${order.orderId}"  th:if="${order.orderStatus}==0" class="btn-sm btn-danger del">取消订单</button>
								<button th:value="${order.orderId}"  th:if="${order.orderStatus}==1" class="btn-sm btn-danger refund">申请退款</button>
								<a th:case="0" href="/frontOrders/selectAll"><button class="btn-sm btn-warning">返回</button></a>
								<a th:case="1" href="/frontOrders/selectAll"><button class="btn-sm btn-warning">返回</button></a>
								<a th:case="2" href="/frontOrders/history"><button class="btn-sm btn-warning">返回</button></a>
								<a th:case="3" href="/frontOrders/history"><button class="btn-sm btn-warning">返回</button></a>
							</div>
						</div>
					</div>
			</div>
		</div>
	</div>
</section>
<div th:replace="/common/frontCommon::footer"></div>

<!-- Optional JavaScript --> 
<!-- jQuery first, then Popper.js, then Bootstrap JS --> 
<script th:src="@{/front-resource/js/jquery.min.js}" type="text/javascript"></script>
<script th:src="@{/front-resource/js/popper.min.js}" type="text/javascript"></script>
<script th:src="@{/front-resource/js/bootstrap.min.js}" type="text/javascript"></script>
<script th:src="@{/front-resource/js/getfund-nav.min.js}" type="text/javascript"></script>
<script th:src="@{/front-resource/js/owl.carousel.min.js}" type="text/javascript"></script>
<script th:src="@{/front-resource/js/waypoints.min.js}" type="text/javascript"></script>
<script th:src="@{/front-resource/js/jquery.counterup.min.js}" type="text/javascript"></script>
<script th:src="@{/front-resource/js/swiper.min.js}" type="text/javascript"></script>
<script th:src="@{/front-resource/js/custom.js}" type="text/javascript"></script>
<script>
    $(function () {
        $('.del').click(function () {
            if(confirm("确认是否取消订单？")){
                var id = $(this).val();
                $.post('/frontOrders/toCancel?id=' + id, function () {
                    alert("取消成功");
                    window.location.reload();
                })
			}
        })
		$('.refund').click(function () {
			if(confirm("确认申请退款？")){
				var id = $(this).val();
				$.post('/alipay/refund?orderId=' + id, function (data) {
					alert(data);
					window.location.reload();
				})
			}
		})
    })
</script>
</body>
</html>